<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>电子围栏</title>
    <link rel="stylesheet" href="dist/styles/iview.css">
    <style>
        html,body,#container,#bmap{
            width: 100%;
            height: 100%;  
            position: relative;
        }
        #geofence-center{
            width:20px;
            height:20px;
            background: #ED2D2D;
            position: absolute;
            left:50%;
            top:50%;
            margin-top:-24px;
            margin-left:-10px;
            border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
            transform: rotate(-225deg);
        }
        #controller{
            position: absolute;
            right: 20px;
            bottom: 20px;
            width: 460px;
            height: 150px;
            border: 1px solid #A4D4F5;
            background: #F3F3F3;
            padding: 10px;
            box-sizing: border-box;
            
        }   
        #controller>div{
            
        }
        .title{
            height: 40px;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
        }
        .my-slider{
            height: 40px;
        }
        .my-slider>div{
            float: left;
            text-align: center;
        }
        .btns{
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="bmap"></div>
        <div id="geofence-center"></div>
        <div id="controller">
            <div class="title">{{title}}({{radius}}米)</div>
            <div class="my-slider">
                <div style="width: 60px;height:36px;line-height:36px;">{{min}}米</div>
                <div  style="width: 318px">
                    <Slider v-model="radius" :step="10" :min="min" :max="max" @on-change="changeValue"></Slider>
                </div>
                <div style="width: 60px;height:36px;line-height:36px;">{{max/1000}}公里</div>
            </div>
            <div  class="btns">
                <i-button @click="handleSubmitFence">保存围栏</i-button>
                <i-button @click="handleDeleteFence">删除围栏</i-button>
            </div>
        </div>
    </div>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/config.js"></script>
    <script src="js/hashmap.js"></script>
    <script src="js/localcachemgr.js"></script>
    <script src="js/transformlatlon.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/util.js"></script>
    <script src="js/area.js"></script>
    <script src="http://api.map.baidu.com/api?v=3.0&ak=e7SC5rvmn2FsRNE4R1ygg44n"></script>
    <script>
        var deviceid = utils.getParameterByName("deviceid");
        var token = utils.getParameterByName("token");
        var map = null;
        (function () { 

            new Vue({
                    el:"#container",
                    data:{
                        map:null,
                        circle:null,
                        mapCenterPoint:null,
                        fr:0,
                        gpslon:null,
                        gpslat:null,
                        b_lon:null,
                        b_lat:null,
                        radius:200,
                        title:"",
                        isSetFence:null,
                        min:200,
                        max:100000,
                    },
                    methods: {
                        initMap : function(){
                            var self = this;
                            var point = null;
                            this.map = new BMap.Map("bmap",{minZoom:4,maxZoom:18});           
                            this.map.enableScrollWheelZoom();
                            this.map.enableAutoResize();
                            this.map.enableDoubleClickZoom();
                        
                           
                            if(this.isSetFence){
                                var b_lon_lat = wgs84tobd09(this.gpslon,this.gpslat);
                                this.b_lon = b_lon_lat[0];
                                this.b_lat = b_lon_lat[1];
                                point = new BMap.Point(this.b_lon,this.b_lat);
                                this.map.centerAndZoom(point,5);
                                this.radius = this.fr;
                                this.setMapZoom(this.fr);
                      
                                this.circle = new BMap.Circle(point,this.fr,{strokeWeight:2,strokeColor:"#F37A5A"});
                            }else{
                                point = new BMap.Point(108.0017245,35.926895);
                                this.map.centerAndZoom(point,5);
                                this.circle = new BMap.Circle(point,this.radius,{strokeWeight:2,strokeColor:"#F37A5A"});
                            };

                            this.mapCenterPoint = point;
                            this.map.addOverlay(this.circle); 

                            this.map.addEventListener("moveend",function(e){   	
                                self.getMapCenterPoint();
                                self.bd09towgs84();   // 百度坐标转国际坐标
                                self.circle.setCenter(self.mapCenterPoint );
                            },false);   

                            this.map.addEventListener("zoomend",function(e){   	  
                                console.log('self.mapCenterPoint', self.mapCenterPoint);			
                                self.map.setCenter(self.mapCenterPoint);
                            },false);

                            this.map.addEventListener("resize",function(e){   	  			
                                self.map.setCenter(self.mapCenterPoint);
                            },false);

                            map = this.map;
                        },
                        getMapCenterPoint:function(){
                            var pt = this.map.getCenter();				
                                this.b_lon = pt.lng;
                                this.b_lat = pt.lat;				
                                this.mapCenterPoint = pt;
                               
                        },
                        bd09towgs84:function(){
                            var lng_lat = bd09towgs84(this.b_lon,this.b_lat);  	
                                this.gpslon = lng_lat[0];
                                this.gpslat = lng_lat[1];
                        },
                        getFenceInfo:function(){
                            var url = myUrls.queryDeviceById();
                            utils.sendAjax(url,{deviceid:deviceid},this.doFenceInfo);
                        },
                        doFenceInfo:function(resp){
                            var device = resp.device;
                            if(resp.status == 0){
                                this.isSetFence =  device.fr > 0 ? true : false;
                                this.fr = device.fr;
                                this.gpslon = device.flon;
                                this.gpslat = device.flat;
                                this.initMap();
                            }else{
                                this.isSetFence = false;
                            }
                            
                        },
                        changeValue:function(value){
                           this.circle.setRadius(value);
                           this.setMapZoom(value);
                        },
                        setMapZoom:function(value){
                            var zoom = 4;
                            if(value > 90000){
                                zoom = 5;
                            }else if(value > 90000){
                                zoom = 6;
                            }else if(value > 70000){
                                zoom = 7;
                            }else if(value > 50000){
                                zoom = 8;
                            }else if(value > 40000){
                                zoom = 9;
                            }else if(value > 30000){
                                zoom = 10;
                            }else if(value > 20000){
                                zoom = 11;
                            }else if(value > 10000){
                                zoom = 12;
                            }else if(value > 5000){
                                zoom = 13;
                            }else if(value > 1000){
                                zoom = 14;
                            }else{
                                zoom = 16;
                            }

                        
                            this.map.setZoom(zoom);
                        },
                        handleSubmitFence:function(){
                            var me = this;
                            var url = myUrls.setGeofence();
                            utils.sendAjax(url,{deviceid:deviceid,lon:this.gpslon,lat:this.gpslat,radius:this.radius},function (resp) { 
                                if(resp.status == 0){
                                    me.$Message.success("保存围栏成功");
                                    me.isSetFence = true;
                                }else{
                                    me.$Message.success("保存围栏失败");
                                }
                            })
                        },
                        handleDeleteFence:function(){
                            var me = this;
                            var url = myUrls.unSetGeofence();
                            utils.sendAjax(url,{deviceid:deviceid},function (resp) { 
                                if(resp.status == 0){
                                    me.$Message.success("删除围栏成功");
                                    me.isSetFence = false;
                                }else{
                                    me.$Message.success("删除围栏失败");
                                }
                            })
                        }
                    },
                    watch:{
                        isSetFence:function(){
                            if(this.isSetFence){
                                this.title = "已设置-围栏";
                            }else{
                                this.title = "未设置-围栏";
                            }
                        }
                    },
                    mounted:function () {
                        this.getFenceInfo();
                    }
            });
        })();
    </script>
</body>
</html>